/* 主视图区 */
.viewer-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color 0.3s ease;

  .canvas-container {
    width: 100%;
    height: 100%;
  }

  .canvas-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    transition: border-color 0.3s ease, color 0.3s ease;

    .hint {
      font-size: 0.9em;
      margin-top: 0.5em;
      transition: color 0.3s ease;
    }
  }

  /* 右下角悬浮操作控件 */
  .viewer-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 10;
  }

  .control-btn {
    padding: 8px 16px;
    background: rgba(22, 104, 220, 0.2);
    border: 1px solid rgba(22, 104, 220, 0.4);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      background: rgba(22, 104, 220, 0.3);
      border-color: rgba(22, 104, 220, 0.6);
    }
  }
}

/* 暗色主题下的 viewer-area */
[data-theme="dark"] .viewer-area {
  background: #0a0a0a;

  .canvas-placeholder {
    border: 2px dashed #333;
    color: #666;

    .hint {
      color: #444;
    }
  }
}

/* 亮色主题下的 viewer-area */
[data-theme="light"] .viewer-area {
  background: #f5f5f5;

  .canvas-placeholder {
    border: 2px dashed #d9d9d9;
    color: #666;

    .hint {
      color: #999;
    }
  }
}